{% extends 'base.html' %}

{% block css %}
    <style>
        #div_digg {
            float: right;
            margin-bottom: 10px;
            margin-right: 30px;
            font-size: 12px;
            width: 125px;
            text-align: center;
            margin-top: 10px;
        }
        .diggit {
            float: left;
            width: 46px;
            height: 52px;
            background: url('/static/img/upup.gif') no-repeat;
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }

        .buryit {
            float: right;
            margin-left: 20px;
            width: 46px;
            height: 52px;
            background: url('/static/img/downdown.gif') no-repeat;
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }
        .clear {
            clear: both;
        }
        .diggword {
            margin-top: 5px;
            margin-left: 0;
            font-size: 12px;
            color: #808080;
        }
    </style>
{% endblock %}

{% block content %}
    <h1>{{ article_obj.title }}</h1>
    <div class="article_content">
    {{ article_obj.content|safe }}
    </div>
{# 点赞点踩#}
    <div class="clearfix">
        <div id="div_digg">
            <div class="diggit  action">
                <span class="diggnum" id="digg_count">{{ article_obj.up_num }}</span>
            </div>
            <div class="buryit  action">
                <span class="burynum" id="bury_count">{{ article_obj.down_num }}</span>
            </div>
            <div class="clear"></div>
            <div class="diggword" id="digg_tips" style="color: red">
            </div>
        </div>
    </div>
    <div>
    <ul class="list-group" id="father">
        {% for comment_obj in comment_list %}
              <li class="list-group-item">
                <p>
                    <span>#{{ forloop.counter }}楼</span>
                    <span>{{ comment_obj.create_time|date:'Y-m-d' }}</span>
                    <span>{{ comment_obj.user.username }}</span>
                    <span><a class="pull-right reply" username="{{ comment_obj.user.username }}" comment_id="{{ comment_obj.pk }}">回复</a></span>
                </p>
                  <div>
                      {% if comment_obj.parent_id %}
                          <p>@{{ comment_obj.parent.user.username }}</p>
                      {% endif %}
                      {{ comment_obj.content }}
                  </div>
              </li>
        {% endfor %}
     </ul>

    </div>
{#  评论  #}
    {% if request.user.is_authenticated %}
        <p class="glyphicon glyphicon-comment">发表评论</p>
        <div>
            <textarea name="comment" id="id_comment" cols="60" rows="10"></textarea>
        </div>
        <button class="btn btn-danger" id="id_submit">提交</button>
        <span id="error" style="color: red"></span>
    {% else %}
        <li><a href="{% url 'login' %}">登录</a></li>
        <li><a href="{% url 'reg' %}">注册</a></li>
    {% endif %} 

{% endblock %}

{% block js %}
    <script>
        let parentId = null;
        $('.action').click(function () {
            let $div = $(this).hasClass('diggit');
            let $btn = $(this);
            $.ajax({
                url: '/up_or_down/',
                type: 'post',
                data: {'article_id': {{article_obj.pk}}, 'is_up': $div },
                success: function (args) {
                    if (args.code === 1000){
                        $('#digg_tips').html(args.msg);
                        let oldnum = $btn.children().text();
                        let newnum = Number(oldnum) + 1;
                        $btn.children().text(newnum)
                    }else {
                        $('#digg_tips').html(args.msg)
                    }
                }
            })
        });

        $('#id_submit').click(function () {
            let content = $('#id_comment').val();
            if (parentId){
                let indexnum = content.indexOf('\n')
                content = content.slice(indexnum)
            }
            $.ajax({
                url: '/comment/',
                type: 'post',
                data: {'article_id': {{article_id}}, 'content':content, 'parent_id': parentId},
                success:function (args) {
                    if (args.code === 1000){
                        $('#error').text(args.msg);
                        $('#id_comment').val('');
                        let userName = '{{ request.user.username }}';
                        let tmp = `
                            <li class="list-group-item">
                                <span>${userName}</span>
                                <span><a href="" class="pull-right">回复</a></span>
                              <div>
                                  ${content}
                              </div>
                            </li>`;
                        $('#father').append(tmp)
                        parentId = null
                    }
                }
            })
        });

        $('.reply').click(function () {
            let userName = $(this).attr('username');
            parentId = $(this).attr('comment_id');
            $('#id_comment').val('@' + userName + '\n').focus()
        })
    </script>
{% endblock %}